<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <style>
      .center-wrap {
        width: 300px;
        height: 500px;
        background-color: #ff6619;
        padding-top: 20px;
        overflow: hidden;
        transition: all 1s ease-in-out 0s;
      }
      #words {
        box-sizing: border-box;
        margin: 0 auto;
        width: 200px;
        text-align: center;
      }
      .face {
        height: 200px;
      }
      #eyes {
        box-sizing: border-box;
        padding-top: 30px;
        margin: 0 auto;
        width: 130px;
        display: flex;
        justify-content: space-between;
        transition: all 1s ease-in-out;
      }
      #eyes li {
        width: 50px;
        height: 50px;
        background-color: black;
        border-radius: 50%;
        transition: all 1s ease-in-out;
      }
      #mouth {
        position: relative;
        margin: 0 auto;
        margin-top: 20px;
        width: 45px;
        height: 45px;
        background: transparent;
        border: solid 5px black;
        border-radius: 50%;
        /* transform: rotate(180deg); */
        transition: all 1s ease-in-out;
      }
      #mouthin {
        position: absolute;
        top: 20px;
        left: -12px;
        content: "";
        width: 70px;
        height: 30px;
        background-color: #ff6619;
        transition: all 1s ease-in-out;
      }
      #emoWords {
        margin: 0 auto;
        margin-top: 80px;
        width: 600px;
        display: flex;
        justify-content: space-between;
        /* background-color: orange; */
        transform: translateX(120px);
        transition: transform 1s ease-in-out 0s;
        overflow: hidden;
      }

      #emoWords span {
        display: block;
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.5);
      }

      #selections {
        position: relative;
        margin: 0 auto;
        margin-top: 45px;
        width: 240px;
        display: flex;
        justify-content: space-between;
      }
      #selections li {
        height: 45px;
        width: 45px;
      }

      #selections li .box {
        margin: 0 auto;
        box-sizing: border-box;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: black;
        transition: all 1s ease 0s;
      }

      #selections li:hover .box {
        transform: scale(1.5);
        cursor: pointer;
      }

      #selections li span {
        margin-top: 10px;
        display: block;
        height: 12px;
        width: 45px;
        line-height: 12px;
        font-size: 9px;
        text-align: center;
      }

      #selections::after {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -15px;
        content: "";
        width: 200px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.3);
      }

      .bounce {
        /* animation: bounceMove 1s ease-in-out forwards; */
      }

      @keyframes bounceMove {
        0% {
          position: relative;
          left: 0;
        }
        33% {
          left: -20px;
        }
        66% {
          left: 20px;
        }
        100% {
          left: 0px;
          position: static;
        }
      }
    </style>
  </head>
  <body>
    <div class="center-wrap">
      <!-- 上方字 -->
      <div id="words">How was your shopping experience</div>
      <div class="face">
        <!-- 眼睛 -->
        <ul id="eyes">
          <li></li>
          <li></li>
        </ul>
        <!-- 嘴巴 -->
        <div id="mouth">
          <div id="mouthin"></div>
        </div>
      </div>

      <!-- 情绪 -->
      <div id="emoWords">
        <span>BAD</span> <span>NOT BAD</span> <span>GOOD</span>
      </div>
      <!-- 选择 -->
      <ul id="selections">
        <li>
          <div data-emo="bad" class="box"></div>
          <span>Bad</span>
        </li>
        <li>
          <div data-emo="nbad" class="box"></div>
          <span>Not Bad</span>
        </li>
        <li>
          <div data-emo="good" class="box"></div>
          <span>Good</span>
        </li>
      </ul>
    </div>
    <script>
      //选择元组
      let options = document.querySelector("#selections");
      let slogan = document.querySelector("#emoWords");
      let screen = document.querySelector(".center-wrap");
      let eye = document.querySelector("#eyes");
      let eyes = eye.getElementsByTagName("li");
      let mouth = document.querySelector("#mouth");
      let mouthBe = document.querySelector("#mouthin");

      //按钮监听
      options.addEventListener(
        "click",
        (e) => {
          // console.log(e);
          // console.log(e.target.tagName);
          if (e.target.tagName === "DIV") {
            switch (e.target.getAttribute("data-emo")) {
              case "bad":
                handerBad();
                break;
              case "nbad":
                handerNBad();
                break;
              case "good":
                handerGood();
                break;
            }
          }
        },
        false
      );

      function handerBad() {
        slogan.className = "";
        slogan.style.transform = `translateX(120px)`;
        screen.style.backgroundColor = `#ff6619`;
        eye.style.width = "130px";
        for (let i = 0; i < eyes.length; i++) {
          eyes[i].style.width = "50px";
          eyes[i].style.height = "50px";
          eyes[i].style.borderRadius = "50%";
        }
        //嘴巴
        mouth.style.transform = "rotate(0deg)";
        mouthBe.style.backgroundColor = `#ff6619`;
        setTimeout(() => {
          slogan.className += `bounce`;
        }, 1000);
      }

      function handerNBad() {
        slogan.className = "";
        slogan.style.transform = `translateX(-130px)`;
        screen.style.backgroundColor = `#ffd519`;
        eye.style.width = "100px";
        for (let i = 0; i < eyes.length; i++) {
          eyes[i].style.width = "38px";
          eyes[i].style.height = "15px";
          eyes[i].style.borderRadius = "7.5px";
        }
        //嘴巴
        mouth.style.transform = "rotate(360deg)";
        mouthBe.style.backgroundColor = `#ffd519`;
        setTimeout(() => {
          slogan.className += `bounce`;
        }, 1000);
      }

      function handerGood() {
        slogan.className = "";
        slogan.style.transform = `translateX(-380px)`;
        screen.style.backgroundColor = `#24ef27`;
        eye.style.width = "130px";
        for (let i = 0; i < eyes.length; i++) {
          eyes[i].style.width = "60px";
          eyes[i].style.height = "60px";
          eyes[i].style.borderRadius = "50%";
        }
        //嘴巴
        mouth.style.transform = "rotate(540deg)";
        mouthBe.style.backgroundColor = `#24ef27`;
        setTimeout(() => {
          slogan.className += `bounce`;
        }, 1000);
      }
    </script>
  </body>
</html>
